<template>
  <div class="home">
    <van-swipe :autoplay="30000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in swiperList" :key="index">
        <router-link :to="item.navigator_url">
          <img :src="item.image_src" alt>
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <div class="pyg-nav clearfix">
      <van-tabbar>
        <van-tabbar-item v-for="(item,index) in navList" :key="index">
          <router-link :to="item.navigator_url">
            <img :src="item.image_src" alt>
          </router-link>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <div class="pyg-home-content">
      <div class="pyg goodsCate" v-for="(item,index) in proData" :key="index">
        <img class="pyg_goods_title" :src="item.group_img" alt>
        <ul class="clearfix">
          <li class="pyg_goods_into" v-for="(item1,index) in item.goods" :key="index">
            <router-link to>
              <img class="pyg_goods_img" :src="item1.goods_small_logo" alt>
              <div class="pyg_goods_desc mui-ellipsis-2">{{item1.goods_name}}</div>
              <div class="pyg_goods_price">￥：{{item1.goods_price}}</div>
            </router-link>
            <router-link to>
              <van-button class="look">找相似</van-button>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getSwiperdata, getNavImg, getHomeProData } from '@/api'
export default {
  name: 'home',
  data () {
    return {
      swiperList: [],
      navList: [],
      proData: []
    }
  },
  created () {
    getSwiperdata().then(res => {
      this.swiperList = res.data.data
    })
    getNavImg().then(res => {
      this.navList = res.data.data
    })
    getHomeProData().then(res => {
      console.log(res)
      this.proData = res.data.data
    })
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: #efeff4;
  img {
    width: 100%;
  }
  .pyg_nav {
    padding: 10px;
    > a {
      width: 25%;
      float: left;
      text-align: center;
      > img {
        width: 80%;
        display: inline-block;
      }
    }
  }
  .pyg-home-content {
    padding: 0px 10px;
    .goodsCate {
      width: 100%;
      .pyg_goods_title {
        width: 100%;
        display: block;
        background-color: #fff;
      }
      .pyg_goods_into {
        width: 49%;
        float: left;
        background-color: #fff;
        margin-top: 5px;
        padding: 0px 8px 3px 8px;
        > a {
          width: 100%;
          display: block;
          text-align: center;
          > .pyg_goods_img {
            width: 100%;
            display: block;
          }
          > .pyg_goods_desc {
            color: #333;
            font-size: 13px;
            text-align: left;
            line-height: 22px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          > .pyg_goods_price {
            color: #e92322;
            font-size: 16px;
            text-align: left;
            line-height: 24px;
          }
        }
      }
      .pyg_goods_into:nth-of-type(even) {
        margin-left: 2%;
      }
      .look {
        width: 100%;
        color: #f0ad4e;
        border: 1px solid #f0ad4e;
      }
    }
  }
}
</style>
